<template>
  <div class="mt--20 purchase-detail">
    <el-tabs v-model="tab" type="border-card" name="0">
      <el-tab-pane label="采购基础信息">
        <div class="detail-section">
          <el-row type="flex" align="middle">
            <el-col :span="12">退货基础信息</el-col>
            <el-col class="text-right" :span="12">
              <el-button v-permission="authConfig.updateStatus"  type="success" v-if="detail.status && detail.status != '退货完成'" @click="updateStatusHandle">{{this.btnText[detail.status] ? this.btnText[detail.status].text : ''}}</el-button>
              <el-button type="danger" @click="print">打印退货单</el-button>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-form class="detail-form" label-width="120px" label-suffix=":">
            <el-row>
              <el-col :span="6">
                <el-form-item label="退货编号">
                  <span class="detail-value">{{detail.returnCode}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="采购门店">
                  <span class="detail-value">{{detail.purchaseStoreName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="采购供应商">
                  <span class="detail-value">{{detail.returnSupplierName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="退货精品数量">
                  <span class="detail-value">{{detail.returnNum}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="单据日期">
                  <span class="detail-value">{{detail.returnReceiptsTime}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="供应商联系人">
                  <span class="detail-value">{{detail.returnSupplierUserName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="供应商联系方式">
                  <span class="detail-value">{{detail.returnSupplierPhone}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="退货类型">
                  <span class="detail-value">{{detail.returnType}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="退货备注">
                  <span class="detail-value">{{detail.returnRemark}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="状态">
                  <span class="detail-value">{{detail.status}}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="detail-section">
          <el-row>退货负责人</el-row>
          <el-divider></el-divider>
          <el-form class="detail-form" label-width="120px" label-suffix=":">
            <el-row>
              <el-col :span="6">
                <el-form-item label="采购人员">
                  <span class="detail-value">{{detail.returnUserName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系方式">
                  <span class="detail-value">{{detail.returnPhone}}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="detail-section">
          <el-row>退货进度</el-row>
          <el-divider></el-divider>
          <steps
            v-if="detail.statusList != null && detail.statusList.length > 0"
            :setpsList="detail.statusList"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="detail.returnType == '采购退货'" label="采购订单信息" name="1">
        <div class="detail-section">
          <el-row type="flex" align="middle">
            <el-col :span="12">采购基础信息</el-col>
          </el-row>
          <el-divider></el-divider>
          <el-form class="detail-form" label-width="120px" label-suffix=":">
            <el-row>
             <el-col :span="6">
                <el-form-item label="采购编号">
                  <span class="detail-value">{{detail.purchaseCode}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="采购门店">
                  <span class="detail-value">{{detail.purchaseStoreName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="退货供应商">
                  <span class="detail-value">{{detail.purchaseSupplierName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="采购精品数量">
                  <span class="detail-value">{{detail.partsNum}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="单据日期">
                  <span class="detail-value">{{detail.purchaseReceiptsTime}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="供应商联系人">
                  <span class="detail-value">{{detail.purchaseSupplierName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="供应商联系方式">
                  <span class="detail-value">{{detail.purchaseSupplierPhone}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="采购类型">
                  <span class="detail-value">{{detail.purchaseType}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="采购备注">
                  <span class="detail-value">{{detail.purchaseRemark}}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="detail-section">
          <el-row>采购精品列表</el-row>
          <el-divider></el-divider>
          <data-table
            :has-action="false"
            :value="table1.tableData"
            :total-count="table1.totalCount"
            :table-column-attributes="tableColumns1"
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1">
          >
            <div class="total-count" slot="allNum">
              精品总金额:<span class="money-value">￥{{table1.amount}}</span>
              <span class="ml-20">总优惠金额:</span><span class="money-value">￥{{table1.freePrice}}</span>
              <span class="ml-20">精品总数量:</span><span class="count-value">{{table1.partsNum}}</span>
            </div>
          </data-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="退货精品列表" name="2">
        <el-row>
          <el-col :span="12">
            退货精品列表
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <data-table
          :has-action="false"
          :value="table2.tableData"
          :total-count="table2.totalCount"
          :table-column-attributes="tableColumns2"
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2">
        >
          <div class="total-count" slot="allNum">
            精品总金额:<span class="money-value">￥{{table2.amount}}</span>
            <span class="ml-20">精品总数:</span><span class="count-value">{{table2.partsNum}}</span>
          </div>
        </data-table>
      </el-tab-pane>
    </el-tabs>
    <!-- <print-form /> -->
  </div>
</template>

<script>
import BaseLayout from '@/views/layout/Base'
import DataTable from '@/components/DataTable'
import { Steps } from '@/components/index'
import PrintForm from './PrintForm'
import { getDict } from '@/utils/index'
import { partsPage as purchasePartsPage } from '@/api/pre-sale/boutiquePurchase/apply'
import { detailById, partsPage, updateStatus } from '@/api/pre-sale/boutiquePurchase/return'
import { exportFile } from '@/utils/index'
export default {
  components: { BaseLayout, DataTable, PrintForm, Steps },
  props: ['detailData'],
  data() {
    this.authConfig = {
      updateStatus: 'purchaseReturn:updateStatus'
    }

    this.tableColumns1 = [
      { name: '精品编号', value: 'partsCode', type: 'text' },
      { name: '精品名称', value: 'partsName', type: 'text' },
      { name: '一级分类', value: 'partsType', type: 'text' },
      { name: '二级分类', value: 'partsUnit', type: 'text' },
      { name: '采购数量', value: 'purchaseNum', type: 'text' },
      { name: '采购成本', value: 'purchasePrice', type: 'text' },
      { name: '优惠', value: 'freePrice', type: 'text' },
      { name: '总金额', value: 'amount', type: 'text' }
    ]

    this.tableColumns2 = [
      { name: '精品编号', value: 'partsCode', type: 'text' },
      { name: '精品名称', value: 'partsName', type: 'text' },
      { name: '一级分类', value: 'partsType', type: 'text' },
      { name: '二级分类', value: 'partsUnit', type: 'text' },
      { name: '退货数量', value: 'returnNum', type: 'text' },
      { name: '采购成本', value: 'returnPrice', type: 'text' },
      { name: '优惠', value: 'freePrice', type: 'text' },
      { name: '总金额', value: 'amount', type: 'text' }
    ]

    this.btnText = {
      '待退货': {
        text: '开始退货',
        status: '退货中'
      },
      '退货中': {
        text: '退货完成',
        status: '退货完成'
      }
    }

    return {
      tab: 0,
      detail: {},
      table1: {
        pageSize: 10,
        currentPage: 1,
        tableData: [],
        totalCount: 0,
        amount: 0,
        freePrice: 0,
        partsNum: 0
      },
      table2: {
        pageSize: 10,
        currentPage: 1,
        tableData: [],
        totalCount: 0,
        amount: 0,
        partsNum: 0
      },
      printObj: {
        id: 'purchaseReturnPrint',
        popTitle: '',
        extraCss: '',
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
      }
    }
  },
  watch: {
    tab(newVlaue) {
      if (newVlaue >= 1) {
        const table = this[`table${newVlaue}`]
        if (table.tableData.length == 0) {
          this[`handleCurrentChange${newVlaue}`](1)
        }
      }
    }
  },
  methods: {
     async print() {
      exportFile(
        `${process.env.BASE_API}/sq/brandPurchaseReturn/print/${this.detail.id}`,
        `${this.detail.returnCode}-退货单.pdf`
      )
    },
  
    updateStatusHandle() {
      const item = this.btnText[this.detail.status]
      updateStatus(this.detail.id, item.status).then(res => {
        this.$emit('refresh')
        this.requestDetail(this.detail.id)
      })
    },
    requestDetail(id) {
      detailById(id).then(res => {
        this.detail = res.data || {}
      })
    },
    handleSizeChange1(pageSize) {
      this.table1.pageSize = pageSize
      this.requestPartsPage()
    },
    handleCurrentChange1(currentPage) {
      this.table1.currentPage = currentPage
      this.requestPartsPage()
    },
    // 请求采购配件分页
    requestPartsPage() {
      purchasePartsPage({ purchaseRecordId: this.detail.purchaseId }, this.table1.pageSize, this.table1.currentPage).then(res => {
        const { content, totalRecords } = res.data
        let amount = 0
        let freePrice = 0
        let partsNum = 0
        this.table1.totalCount = totalRecords || 0
        this.table1.tableData = content || []
        this.table1.tableData.forEach(item => {
          amount += item.amount
          freePrice += item.freePrice
          partsNum += item.purchaseNum
        })
        this.table1.amount = amount
        this.table1.freePrice = freePrice
        this.table1.partsNum = partsNum
      })
    },
    searchHandle() {
      this.handleCurrentChange2(1)
    },
    handleSizeChange2(pageSize) {
      this.table2.pageSize = pageSize
      this.requestPartsDetailPage()
    },
    handleCurrentChange2(currentPage) {
      this.table2.currentPage = currentPage
      this.requestPartsDetailPage()
    },
    // 请求配件列表
    requestPartsDetailPage() {
      partsPage({ purchaseReturnId: this.detailData.id }, this.table2.pageSize, this.table2.currentPage).then(res => {
        const { content, totalRecords } = res.data
        let amount = 0
        let partsNum = 0
        this.table2.totalCount = totalRecords || 0
        this.table2.tableData = content || []
        this.table2.tableData.forEach(item => {
          amount += item.amount || 0
          partsNum += item.returnNum || 0
        })
        this.table2.amount = amount
        this.table2.partsNum = partsNum
      })
    }
  },
  created() {
    this.dict = getDict(['入库状态'])
  },
  mounted() {
    if (this.detailData) {
      this.requestDetail(this.detailData.id)
    }
  }
}
</script>

<style></style>
